<template>
<div class="restpassword">
      <el-button type="primary" @click="goback()" style="margin-left:800px;border-radius:50px" size="small">返回</el-button>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="验证身份" name="first">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-left:150px">
  <el-form-item label="用户名/店铺授权编码" prop="authId" label-width="150px" style="margin:30px 0">
    <el-input v-model="ruleForm.authId" style="width:280px" placeholder="请输入用户名/12位店铺授权编码"  maxlength="12"></el-input>
  </el-form-item>
  <el-form-item label="关联手机号" prop="phone" label-width="150px" style="margin:30px 0">
    <el-input v-model="ruleForm.phone" style="width:280px" placeholder="请输入关联手机号"></el-input>
  </el-form-item>
    <el-form-item label="验证码" prop="yanma" label-width="150px" style="margin:30px 0">
    <el-input v-model="ruleForm.yanma" style="width:280px" placeholder="请输入验证码"></el-input>
    <span v-show="show" @click="getCode()" class="count">获取验证码</span>

<span v-show="!show" class="count">{{count}}</span>
  </el-form-item>
  <el-form-item style="margin-left:120px">
      
    <el-button type="primary" @click="quxiao()"  size="small">取消</el-button>
    <el-button type="primary" @click="clicknext('ruleForm')"  size="small">下一步</el-button>
  </el-form-item>
</el-form>
    </el-tab-pane>
    <el-tab-pane label="重置密码" name="second" :disabled="flagdian">  
        
<el-form :model="ruleFormone" :rules="rulesone" ref="ruleForm" label-width="100px" class="demo-ruleForm"  style="margin-left:150px">
  <el-form-item label="新密码" prop="password" label-width="150px" style="margin:30px 0">
    <el-input v-model="ruleFormone.password" style="width:280px" placeholder="请输入新密码"></el-input>
  </el-form-item>
  <el-form-item label="重复新密码" prop="newpassword" label-width="150px" style="margin:30px 0">
    <el-input v-model="ruleFormone.newpassword" style="width:280px"  placeholder="请再次输入密码"></el-input>
  </el-form-item>
 
  <el-form-item style="margin-left:150px">
      
    <!-- <el-button type="primary" @click="submitForm('ruleForm')"  size="small">取消</el-button> -->
    <el-button type="primary" @click="sure()"  size="small">重置密码</el-button>
    
  </el-form-item>
</el-form></el-tab-pane>
      
  </el-tabs>
  </div>
</template>
<script>
import { sendVerificationCode,resetPassword } from "@/api/loginApi";
import qs from "qs";
  export default {
    data() {
      return {
          manumber:"",
            show: true,

   count: '',
flagdian:true,
   timer: null,
        activeName: 'first',
          ruleForm: {
       authId:"",
       phone:"",
       yanma:"",
        },
             ruleFormone: {
       password:"",
       newpassword:"",
        },
        rules: {
          authId: [
            { required: true, message: '请输入用户名/12位店铺授权编码', trigger: 'blur' },
        
          ],
          phone: [
            { required: true, message: '请输入关联手机号', trigger: 'blur' }
          ],
       
            yanma: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ],
        },
            rulesone: {
          password: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
        
          ],
          newpassword: [
            { required: true, message: '请确认新密码', trigger: 'blur' }
          ],
        
        }
      
      };
    },
    methods: {
        quxiao(){

             this.$router.push("/login")
        },
        goback(){
            this.$router.push("/login")
        },
        sure(){
                 if (this.ruleFormone.password== "" || this.ruleFormone.password== null) {
        this.$message.error("请输入新密码");
        return;
      }
          if (this.ruleFormone.newpassword== "" || this.ruleFormone.newpassword== null) {
        this.$message.error("请输入确认密码");
        return;
      }
            if(this.ruleFormone.password==this.ruleFormone.newpassword){
 let data = {
        authId: this.ruleForm.authId,
          password: this.ruleFormone.password,

      };
      resetPassword(qs.stringify(data)).then(res => {
          if(res.code==1){
               this.$message({
            message: "密码重置成功，请重新登录",
            type: "success",
            center: true
          });
          
        
          }else if(res.code==0){
               this.$message({
            message: res.message,
            type: "error",
            center: true
          });
          }
       
      })
            }else{
               this.$message({
            message: "两次输入的密码不一致",
            type: "error",
            center: true
          });  
            }


        },
clicknext(){
       if (this.ruleForm.authId== "" || this.ruleForm.authId== null) {
        this.$message.error("请输入用户名/店铺授权编码");
        return;
      }
          if (this.ruleForm.phone== "" || this.ruleForm.phone== null) {
        this.$message.error("请输入关联手机号");
        return;
      }
    
if(this.manumber==this.ruleForm.yanma&&this.ruleForm.yanma!==""){
this.flagdian=false
this.activeName="second"
}else{
    this.flagdian=true
     this.$message({
            message: "验证码输入不正确",
            type: "error",
            center: true
          });
}
},
        
          getCode(){
 let data = {
        authId: this.ruleForm.authId,
          phone: this.ruleForm.phone,

      };
      sendVerificationCode(qs.stringify(data)).then(res => {
          if(res.code==1){
               this.$message({
            message: res.message,
            type: "success",
            center: true
          });
        this.manumber=res.result
          const TIME_COUNT = 60;

     if (!this.timer) {

       this.count = TIME_COUNT;

       this.show = false;

       this.timer = setInterval(() => {

       if (this.count > 0 && this.count <= TIME_COUNT) {

         this.count--;

        } else {

         this.show = true;

         clearInterval(this.timer);

         this.timer = null;

        }

       }, 1000)

      }
          }else if(res.code==0){
               this.$message({
            message: res.message,
            type: "error",
            center: true
          });
          }
       
      })
   
        },

      handleClick(tab, event) {
        console.log(tab, event);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>
<style>
.restpassword{
      
   background: #fff;
    width: 76%;
    padding: 3% 0;
    margin: 0 auto;
    border: 2px #ccc dashed;
    margin-top: 2%;

}
.count{
        padding: 10px;
    background: #ccc;
    color: #fff;
    text-align: center;
    height: 20px;
    display: inline-block;
    line-height: 20px;
}
</style>